<main>
    <div class="custom-panel">
        <div class="custom-panel-hd">
            <div class="isFixed">
                <h1>购物车</h1>
                <div class="custom-panel-btn" v-if="cartGoodsNumber !== 0" @click="editorGoods($event)">编辑</div>
            </div>
        </div>
        <div class="custom-panel-bd">
            <div class="custom-notice" v-if="totalPrice >= 88"><span>已满足免邮条件</span></div>
            <ul class="custom-service-policy" v-else>
                <li v-for="service in servicePolicy" :key="service"><i class="iconfont icon-quan"></i>{{service}}</li>
            </ul>
            <section v-if="cartGoodsNumber !== 0">
                <ul class="custom-flex-list custom-goods-list">
                    <li v-for="(goods, index) in this.cartGoods" :key="index">
                        <div class="custom-key">
                            <span class="custom-checkbox"
                                :checked="isShowEditor?editCheckedGoods[index]:goods.checked"
                                @click="toggleChecked(goods,index)">
                                <i class="iconfont icon-check"></i>
                            </span>
                        </div>
                        <div class="custom-info nowrap">
                            <router-link :to="{path:'/goodsDetail',query:{id:goods.supId}}">
                                <img :src="goods.pic" alt="">
                            </router-link>
                            <div class="custom-txt">
                                <h4>{{goods.name}}</h4>
                                <p class="custom-des">{{goods.sku}}</p>
                                <div class="custom-txtbtm">
                                    <div class="custom-count fr">
                                        <span @click="countGoodsNumber(goods,false)"
                                            :class="{disabled: goods.num === 1}">-</span>
                                        <input type="number" v-model="goods.num" />
                                        <span @click="countGoodsNumber(goods,true)">+</span>
                                    </div>
                                    <span>{{goods.price | priceFomat(goods.price)}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <div class="custom-nodata" v-else>
                <i class="icon icon-cart"></i>
                <p>去添加点什么吧</p>
                <div class="custom-btn-box" v-if="typeof token !== 'string'">
                    <van-button type="danger" to="/login" size="small" block>登录</van-button>               
                </div>
            </div>
        </div>
        <div class="custom-panel-ft" v-if="cartGoodsNumber !== 0">
            <div class="custom-info">
                <span class="custom-checkbox" :checked="isSelectedAll" @click="selectedAll(isSelectedAll)"><i
                        class="iconfont icon-check"></i></span>
                <span>已选({{selectedNum}})</span>
                <span class="fr custom-price" v-if="!isShowEditor">{{totalPrice | priceFomat(totalPrice)}}</span>
            </div>
            <div class="custom-key" v-if="!isShowEditor">
                <span :class="[{'disabled': selectedNum <= 0},'btn btn-full']">下单</span>
            </div>
            <div class="custom-key" v-else>
                <span :class="[{'disabled': selectedNum <= 0},'btn btn-full']" @click="deleteGoods()">删除所选</span>
            </div>
        </div>
    </div>

    <Footer></Footer>
</main>